<template>
  <div>
    <el-dialog :title="title" v-model="dialogShow" @closed="close" width="40%" style="border-radius: 10px">
      <el-form ref="categoryRef" :model="categoryForm" style="width: 80%; margin: 0 auto" :rules="rules">
        <el-form-item label="分类名称" prop="name">
          <el-input placeholder="请输入分类名称" v-model="categoryForm.name" />
        </el-form-item>
        <el-form-item label="分类排序" prop="sort">
          <el-input placeholder="请输分类排序" type="number" v-model="categoryForm.sort" />
        </el-form-item>
        <el-form-item>
          <el-row justify="end" style="width: 100%" class="mt-4">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm">{{ props.updateData.id ? "修改" : "添加" }}</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, computed } from "vue"
import { type FormInstance, ElMessage } from "element-plus"
import { addCategoryAPI, updateCategoryAPI } from "@/api/category"

const props = defineProps<{
  modelValue: boolean
  type: number
  updateData: any
}>()

const emit = defineEmits(["update:modelValue"])

// 弹框显示
const dialogShow = ref<boolean>(props.modelValue)

watch(
  () => props.modelValue,
  () => {
    dialogShow.value = props.modelValue
  }
)

// 关闭弹框
const close = () => {
  emit("update:modelValue", false)
}

// 分类添加表单
const categoryForm = ref<any>({
  name: "",
  sort: 1,
  type: props.type
})

// 表单校验
const rules = {
  name: [
    {
      required: true,
      message: "请输入分类名称",
      trigger: "blur"
    },
    {
      min: 2,
      max: 10,
      message: "长度在 2 到 10 个字符",
      trigger: "blur"
    }
  ],
  sort: [
    {
      required: true,
      message: "请输入分类排序",
      trigger: "blur"
    }
  ]
}

// 表单对象
const categoryRef = ref<FormInstance>()

// 表单提交
const submitForm = () => {
  categoryRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      // 修改分类
      if (props.updateData.id) {
        const res = await updateCategoryAPI(categoryForm.value)
        if (res.code === 1) {
          ElMessage.success("修改成功")
          cancel()
        }
      } else {
        // 添加分类
        const res = await addCategoryAPI(categoryForm.value)
        if (res.code === 1) {
          ElMessage.success("添加成功")
          cancel()
        }
      }
    }
  })
}

// 取消
const cancel = () => {
  categoryRef.value?.resetFields()
  categoryForm.value = {
    name: "",
    sort: 1,
    type: props.type
  }
  close()
}

// 页面标题
const title = computed(() => {
  if (props.updateData.id) {
    return "更新分类"
  } else {
    return props.type === 1 ? "添加菜品分类" : "添加套餐分类"
  }
})

watch(
  () => props.updateData,
  () => {
    if (props.updateData) {
      categoryForm.value = {
        id: props.updateData.id,
        name: props.updateData.name,
        sort: props.updateData.sort,
        type: props.updateData.type
      }
    }
  }
)
</script>

<style scoped></style>
